<template>
  <view>
    <cu-custom :bgColor="NavBarColor" :isBack="isShow!=1" backRouterName="index">
      <block slot="backText"  v-if="isShow!=1">返回</block>
      <block slot="content">我的订单</block>
    </cu-custom>
  
<!--    <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" v-model="keyword" placeholder="输入申请单ID" confirm-type="search"
               @confirm="searchUserByKey"></input>
      </view>
      <view class="action">
        <button class="cu-btn bg-gradual-red shadow-blur round" @tap="searchUserByKey">搜索</button>
      </view>
    </view> -->
	<view>
	  <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
	                         activeColor="#ff3333"></uni-segmented-control>
	</view>
	<uni-search-bar @confirm="search" :focus="true" v-model="keyword" @blur="load" @focus="load" @input="load"
					@cancel="load" @clear="load">
				</uni-search-bar>
	
    <view style="margin-top: 5px;" v-for="item in list" :key="item.id">
      <uni-card title="申请升级:会员" :extra="`金额: ${item.money}元`" :isFull="true">
        <uni-row class="demo-uni-row">
          <uni-col :span="18">
            <text class="uni-body">会员姓名：{{item.checkName}}</text>
          </uni-col>
          <uni-col :span="6">
          </uni-col>
          <uni-col :span="18">
           <view class="container">
            	<view class="phone">联系电话：{{ item.checkPhone }}</view> 
           				<view  class="bg-gradual-green shadow-blur" 
           				        @tap="handleCall(item.checkPhone)">一键拨号</view>
           				</view>
             
          </uni-col>
          <uni-col :span="6">
            <button class="cu-btn bg-gradual-red shadow-blur" v-show="item.auditState==0"   @tap="dialogToggle('success',item.id)">审核</button>
			 <button class="cu-btn bg-gradual-red shadow-blur" v-show="item.auditState==1">已审核</button>
          </uni-col>
          <uni-col :span="24">
            <view class="container">
             	<view class="phone">微信/支付宝：{{ item.checkWz }}</view> 
            				<view  class="bg-gradual-green shadow-blur" 
            				        @tap="copy(item.checkWz)">一键复制</view>
            				</view>
          </uni-col>
        </uni-row>
        <uni-collapse ref="collapse"> 
          <uni-collapse-item title="付款记录" :open="false" >
            <view>
              <image :src="item.moneyImg" mode="heightFix"></image>
            </view>
          </uni-collapse-item>
          
        </uni-collapse>
      </uni-card>
    </view>
	<view v-show="(user.vipDJ==1  || user.vipDJ==0)&& list.length==0" style="display: flex; flex-direction: column; align-items: center; margin-top: 100px;">
	  <image src="../../static/no_team.png" mode="" style="width: 100px; height: 100px;"></image>
	   <text style="margin-top: 10px; font-size: 16px; color: #999;">您还不是会员</text>
	   	<button class="cu-btn margin-lg bg-gradual-red shadow-blur"  @tap="goPage()">去升级</button> 
	</view> 
    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="确认审核通过" @confirm="check"
                          @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view> 
</template>

<script>
import api from '@/api/api'

export default {
	props: {
	    isShow: {
	      type: Boolean,
	      default: false
	    }
	  },
  data() {
    return {
		user:{},
      items: ['待审核', '已审核'],
      current: 0,
      id: '',
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      keyword: '',
      userId: '',
      list: [],
      //审核状态(0未审核，1已审核)
      auditState: 0,
      msgType: ''
    }
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        console.log('watch', this.cur)
        this.userId = this.$store.getters.userid
        this.load()
      }
    }
  },
  mounted() {
			this.usertongji()
		},
  onLoad() {
  },
  methods: { 
	  handleCall(value) {
	        uni.makePhoneCall({
	          phoneNumber: value,
	          success() {
	            console.log('拨号成功')
	          },
	          fail() {
	            console.log('拨号失败')
	          }
	        })
	      },
	  copy(value){
	  		console.log('88888'+value)
	    // 复制
	    uni.setClipboardData({
	      data: value,// 复制的内容
	      success: function () {
	        console.log('success');
	        uni.showToast({
	          title:'复制成功',
	          duration:2000
	        })
	      }
	    });
	  
	  },
	  goPage(page){
	  this.$Router.push({name: 'uplevel'})
	  },
	  usertongji(){
	  	api.usertongji( this.userId).then(response => {
	  			      if(response.data.code ==200){   
	  					  this.user = response.data.result  
	  					  let avatar=(response.data.result.avatar && response.data.result.avatar.length > 0)? api.getFileAccessHttpUrl(response.data.result.avatar):'/static/avatar_boy.png'
	  					  this.user.avatar =avatar
	  			      }else{ 
	  					let msg = response.data.message || "请求超时"
	  					this.$tip.alert(msg);  
	  			      }
	  	  }).catch(error => { 
	  		this.$tip.alert("请求超时");
	  		
	  		this.isDisabled = true 
	  	})
	  },
    searchUserByKey() {
      this.load()
    },
    dialogToggle(type, id) {
      this.id = id
      this.msgType = type
      this.$refs.alertDialog.open()
    },
    dialogClose() {
      this.id = ''
      this.$refs.alertDialog.close()
    },
    check() {
      api.check(this.id).then(response => {
        if (response.data.code == 200) {
          this.$tip.alert('审核成功！')
          this.load()
          this.id = ''
          this.$refs.alertDialog.close()
        } else {
          let msg = response.data.message || '请求超时'
          this.$tip.alert(msg)
        }
      }).catch(error => {
        this.$tip.alert('请求超时')

        this.isDisabled = true
      })
    },

    load() {
      api.shenhedingdan(this.auditState, this.userId, this.keyword).then(response => {
        if (response.data.code == 200) {
          this.list = response.data.result
		  for (let i in this.list) {
		       this.list[i].moneyCode=this.list[i].moneyCode 
		  			    this.list[i].moneyImg= api.getFileAccessHttpUrl(this.list[i].moneyImg)
		  			    
		   }
        } else {
          let msg = response.data.message || '请求超时'
          this.$tip.alert(msg)
        }
      }).catch(error => {
        this.$tip.alert('请求超时')

        this.isDisabled = true
      })
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex
        this.auditState = e.currentIndex
        this.load()
      }
    },
    backTap() {
      this.$Router.replace({ name: 'index' })
    }


  }
}
</script>

<style>
page {
  padding-top: 100 upx;
}

.mpx {
  margin-bottom: 20px; /* 设置下边距为20像素 */
}
.container {
  display: flex;
  align-items: center;
} 
 
.phone {
  margin-right: 10px;
}

.copy-btn {
  padding: 5px 10px;
  background-color: #eee;
  color: #333;
  border-radius: 4px;
}
.indexes {
  position: relative;
}

.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20 upx 20 upx 20 upx 60 upx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40 upx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20 upx rgba(0, 0, 0, 0.1);
  border-radius: 10 upx;
}

.indexBar-item {
  flex: 1;
  width: 40 upx;
  height: 40 upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24 upx;
  color: #888;
}

movable-view.indexBar-item {
  width: 40 upx;
  height: 40 upx;
  z-index: 9;
  position: relative;
}

movable-view.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10 upx;
  height: 20 upx;
  width: 4 upx;
  background-color: #f37b1d;
}

.indexToast {
  position: fixed;
  top: 0;
  right: 80 upx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100 upx;
  height: 100 upx;
  border-radius: 10 upx;
  margin: auto;
  color: #fff;
  line-height: 100 upx;
  text-align: center;
  font-size: 48 upx;
}
</style>
